I'm using Jssor to build a slideshow with iframes. In each Iframe there's a video in it with autoplay (built through Hype). To make it, I build the slideshow on my space in jssor, then export it in jquery, then replace in the code the images divs with iframes. My issue: how to make lazy loading works with iframes ? Since to make it work with images I would need to replace scr by scr2, but with iframes ?...
Thank you for the help. If I can't make it work, all the Iframes with video load at the same time and it slows the show... There you can see the slideshow: http://www.expo.martincoiffier.com/belle_ile-CINEMAGRAPHS-jquery/
I think you can leave src attribute to empty for iframe elements in the second slide, and listen to $JssorSlider$.$EVT_PARK event, and then set src attribute after the slide comes.
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex) {
if(slideIndex == 1) { //the second slide parks at the view
//set src attribute for iframe elements in the second slide
}
});
Reference: http://www.jssor.com/development/reference-api.html
Related
I've got a Wordpress site with a banner across the top that is 100 px tall. I'm trying to construct a page that instructs people how to check their spam folders for each major email service. I'm using the "Gutenberg" editor.
When I jump to an anchor (Gmail for example), it goes to a spot that cuts off the top 100 px of the section being jumped to because of the banner at the top of my page. I'd like to jump to the anchor and then scroll an additional 100 px down so that it looks like it's scrolling to the beginning of the appropriate section.
I don't need any kind of scrolling effect or anything like that, I just need it to go to the spot on the page where top of the section isn't cut off by the banner.
This is the code I'm using in Custom HTML blocks on my Wordpress page:
Block 1:
<p>Gmail</p>
Block 2:
<p style = "position:relative;">
<a id="Gmail" style="position:absolute; top:-100px;"></a> Gmail may filter your emails into one of several places including the Spam mail folder. Click on the Spam folder to check inside for the missing email.
</p>
I got this code from this page.
When I click the jump link, it goes to the anchor, but it still hides the top 100 px of the linked section underneath the top banner.
What do I need to do to make this work? I'm very new to HTML and CSS, so please don't assume I know anything besides the extreme basics.
Thanks in advance!
You can use this script for a scroll.
$(document).ready(function(){
$( "a.scrollLink" ).click(function( event ) {
event.preventDefault();
$("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
});});
I'm using Fancybox for Wordpress to display a form.
Within the fancybox is a div with id "popup1", which contains the form.
When the user submits the form, #popup1 disappears, and #popup2 appears. div#popup2 just has a little "Thank you" message that is very short.
The height of the fancybox window automatically resizes to fit the height of the content when I switch from popup1 to popup2, but I want the WIDTH of fancybox window to shrink also. How can I do that?
Thanks in advance!
You have several handlers to flip from one pop-up to another like
$("#popup4-BA").slideDown("slow");
Try adding the fancybox (v1.3.4) method $.fancybox.resize() after completing the animation like
$("#popup4-BA").slideDown("slow", function(){
$.fancybox.resize();
});
... you may need to do this in every handler.
Some Notes:
you first pop-up has a fixed width so you may need to try removing it and set the css width property to auto.
since you are using fancybox v1.3.4 with inline content, you need to be aware of this BUG and workaround.
I have some high-res images in a gallery on my site, and all I want some sort of animation like what can be found at ajaxload.info, to display in place of my image until it is fully loaded. Some its suggest its as simple as adding something like this to your css:
img { background:url('../images/ajax-loader.gif') center center no-repeat;}
Well for one this adds this background image to my transparent 'spacer.gif' resulting in the loading image showing up where my spacer is. However this 'method' doesn't even work to begin with. When I view the high-res images they still load from top to bottom, and I don't even see the loader.gif. Any help? I thought there was information on this everywhere, but for the life of me I can't find it.
just give all the high res images a class and then in the css use the class name instead of the global img tag to have the background set to.
If you use jquery to load the images then the images won't load from the top down but will only appear when it's fully loaded, so the background loader image will be visible and once the image has fully loaded and is displayed the loader will be covered. This method works pefectly as it's so simple, you were probably just missing something out.
Initially the following page has a fixed height with a form:
http://arms.aero/gmg/ftrack/ftrack.aspx
when search is done the height of this page varies according to the reach-result.
Now I have to display this page as inner content from another page (its a php page) – so that the varying heights adjust automatically according to its page content.
I have tried with an iframe feature like this http://host.sonspring.com/iframe/ .
But the problem is - it is using different pages to adjust iframe heights, and mine is only one page (initial content and content with search result).
Please help me find a solution.
Try this, you can change for even when you want.
$('#iframe').live('mousemove', function (event) {
var theFrame = $(this, parent.document.body);
this.height($(document.body).height() - 350);
});
Is there a way to move down by some pixel a div with a text inside? (Maybe using jQuery or w/e)
The effect I would get is like when stackoverflow shows at top the yellow message (for a badge) But I need it inside a page, without moving down all the rest of the page
EXAMPLE:
http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg
(I would add a fade effect too while the message is moving down)
Ps. Please consider the message can be more than 1 (just like stackoverflow at top)
with jQuery this would be done like:
<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..
Online demo: http://jsfiddle.net/NzPfM/
Se more about jQuery effects here: http://api.jquery.com/category/effects/
If you want to slide it down and fade it in at the same time, then you should use .animate() instead, something like:
$("#message").animate({height:"30px", opacity:1 },500);
Online demo: http://jsfiddle.net/NzPfM/1/
UPDATE: If you want to avoid moving other content while animating you can use position:absolute in css see demo below:
Demo avoiding push down: http://jsfiddle.net/NzPfM/2/
You can set the div to position:absolute and then animate it down using jQuery.animate to change the top style.
read about jQuery.animate here: http://api.jquery.com/animate/
You can see a simple example here: http://jsfiddle.net/NsxTa/
Note: This method as opposed to using the slideDown will actually slide the entire div down from it's hiding place, where as slideDown will just reveal statically positioned content, which imo looks really awefull
Assuming that your page is not laying inside some container with position-absolute,
adding a container element as fist child of the body will push down render all the rest of the page.
(container - any HTML tag that contains HTML. usually DIV).
This is an example using pure javascript:
http://jsfiddle.net/osher/ByngB/
connect the "add" to your messaging event, or render the on the server
connect the "remove" to the close button of the message bar
and that will be all :)
function $e(s){ return document.getElementById(s) }
function add(){
var d = document.createElement("div");
d.innerHTML = "your message: " + $e("txt").value;
document.body.insertBefore(d, document.body.firstChild);
}
function remove(){
// assuming that your page content is wrapped in a div with ID="content"
if (document.body.firstChild.id == "content") return;
document.body.removeChild( document.body.firstChild);
}